<template>
  <div class="selectSelect">
    <el-form size="mini" :model="formData" ref="formData">
      <div class="flex">
        <div class="mr-5 fontMini">当"上级字段"为</div>
        <el-form-item prop="parentValue" :rules="rules.parentValue" class="flex1">
          <el-select class="flex1" v-model="formData.parentValue" multiple clearable @change="valueChange($event, 'parentValue')">
            <el-option v-for="item in parentData.options" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <div class="ml-5 fontMini">时，</div>
      </div>

      <div class="flex">
        <div class="mr-5 fontMini">"当前选项"</div>
        <el-form-item prop="currentValue" :rules="rules.currentValue" class="flex1">
          <el-select class="flex1" v-model="formData.currentValue" multiple clearable @change="valueChange($event, 'currentValue')">
            <el-option v-for="item in activeFormData.options" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <div class="ml-5 fontMini">显示</div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: '',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: Object,
    parentData: Object
  },
  data() {
    return {
      formData: {},
      rules: {
        parentValue: [{ required: true, message: '上级字段不能为空', trigger: 'change' }],
        currentValue: [{ required: true, message: '当前选项不能为空', trigger: 'change' }]
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.formData = val === '' ? this.formDataInit() : val
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    ...mapState('pageData', ['activeFormData'])
  },
  mounted() {
    setTimeout(() => {
      this.$refs.formData.clearValidate()
    })
  },
  methods: {
    formDataInit() {
      return {
        parentValue: [],
        currentValue: []
      }
    },
    valueChange(val, key) {
      this.formData[key] = val
      this.$emit('change', this.formData)
    },
    // 校验子组件是否成功和当前form是否成功
    verfiyForm() {
      return new Promise(async resovle => {
        this.$refs.formData.validate(valid => {
          if (valid) {
            resovle('success')
          } else {
            resovle('error')
          }
        })
      })
    }
  }
}
</script>